<template>
  <div class="container" v-if="pageAuth">
    <page-header :title="$t('m.settingContactUs')" :has-return="true">
    </page-header>

    <div class="detail_div">
      <div class="detail_left">
        <div class="detail_left_div">
          <el-form ref="form" :model="form" :rules="rules">
            <div class="create_title2">
              {{ $t('m.Menu_System_App_Enquiry') }}
            </div>
            <el-form-item prop="whatsapp">
              <el-input
                v-model="form.whatsapp"
                @input="changeWhatsapp"
                :placeholder="$t('m.Please_enter')"
                maxlength="15"
                clearable
              />
            </el-form-item>
            <div class="create_title2">{{ $t('m.Menu_System_App_Email') }}</div>
            <el-form-item prop="email">
              <el-input
                :placeholder="$t('m.Please_enter')"
                v-model="form.email"
                @input="disabled = false"
                maxlength="320"
                clearable
              />
            </el-form-item>
            <!-- <div class="create_title2">{{ $t('m.Wechat_QR_code') }}</div>
            <el-form-item prop="weChant-qr-code">
              <el-checkbox-group
                v-model="form['weChant-qr-code']"
                v-show="false"
              ></el-checkbox-group>
              <div style="display:flex;">
                <el-image
                  class="upload-img"
                  v-show="form['weChant-qr-code']"
                  fit="cover"
                  :src="fileUrlFormat(form['weChant-qr-code'])"
                  :preview-src-list="[fileUrlFormat(form['weChant-qr-code'])]"
                >
                </el-image>
                <el-upload
                  :class="{ 'upload-img': !form['weChant-qr-code'] }"
                  :style="
                    form['weChant-qr-code']
                      ? 'display:flex;align-items:end;height:88px;'
                      : ''
                  "
                  name="files"
                  :accept="$dict.file.types.img"
                  :action="$store.state.fileUrl"
                  :show-file-list="false"
                  :before-upload="uploadBefore"
                  :on-success="uploadSuccessForWechatQR"
                >
                  <img
                    v-show="!form['weChant-qr-code']"
                    :src="require('@/assets/imgs/appphoto@2x.png')"
                  />
                  <div v-show="form['weChant-qr-code']" class="upload_btn">
                    <div>{{ $t('m.Change') }}</div>
                    <div
                      @click.stop="
                        form['weChant-qr-code'] = ''
                        disabled = false
                      "
                    >
                      {{ $t('m.delete') }}
                    </div>
                  </div>
                </el-upload>
              </div>
            </el-form-item> -->
          </el-form>
        </div>
      </div>
    </div>
    <div class="create_button">
      <el-button
        class="el_button"
        @click="submit()"
        :disabled="disabled"
        type="primary"
        >{{ $t('m.save') }}</el-button
      >
    </div>
  </div>
</template>
<script>
import API from '@/api/modules/setting'

export default {
  data () {
    return {
      form: {
        whatsapp: '',
        email: '',
        'weChant-qr-code': '',
        'zalo-qr-code': ''
      },

      rules: {
        email: [
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: this.$t('m.EnterCorrectEmail'),
            trigger: 'blur'
          }
        ]
      },
      disabled: true,
      pageAuth: this.permissionsId(125), 
    }
  },
  created () {
    if (!this.pageAuth) {
      return
    }
    this.getConfigs()
  },
  methods: {
    changeWhatsapp (val) {
      this.disabled = false
      this.form.whatsapp = this.$check.onlyNum(val)
    },
    getConfigs () {
      API.getConfigs().then(res => {
        if (this.$ok(res)) {
          this.form['email'] = res.data['email']
          this.form['whatsapp'] = res.data['whatsapp']
          this.form['weChant-qr-code'] = res.data['weChant-qr-code']
          this.form['zalo-qr-code'] = res.data['zalo-qr-code']
        }
      })
    },
    // 提交
    submit () {
      // console.log('submit', this.form)
      if (this.form.email) {
        this.$refs.form.validateField('email', valid => {
          // console.log(valid);
          if (valid) {
            return
          }
          this.save()
        })
      } else {
        this.$refs.form.clearValidate('email')
        this.save()
      }
    },
    save () {
      const params = this.$util.map2listForConfig(this.form)
      API.batchModifyConfigs(params).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getConfigs()
          this.disabled = true
          // this.back()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //文件上传限制
    uploadBefore (file) {
      // console.log(file.name, 'file.name')
      const isJPG = this.$dict.file.imageType.indexOf(file.type) != -1
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.warning(this.$t('m.Upload_image_type'))
        return false
      }
      if (!isLt1M) {
        this.$message.warning(this.$t('m.Upload_image_size'))
        return false
      }
      return isJPG && isLt1M
    },
    // 文件上传成功处理
    uploadSuccessForWechatQR (res, file) {
      // console.log(file)
      this.form['weChant-qr-code'] = file.response.data.value
      this.$refs.form.clearValidate('weChant-qr-code')
      this.disabled = false
    },
    // 文件上传成功处理
    uploadSuccessForZaloQR (res, file) {
      // console.log(file)
      this.form['zalo-qr-code'] = file.response.data.value
      this.$refs.form.clearValidate('zalo-qr-code')
      this.disabled = false
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  min-width: 1000px !important;
  // max-width: 1000px !important;

  .page-header {
    padding: 20px 0;
  }

  .page-header,
  .detail_div,
  .detail_left {
    width: 100% !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
  }

  .detail_div,
  .detail_left {
    margin: 0 !important;
  }

  .detail_left_div {
    padding-bottom: 30px;
    margin-top: 0;
  }

  .el-form {
    width: 490px;
  }

  .upload_btn {
    display: flex;
    div {
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      color: var(--text-color);
      line-height: 20px;
      margin-left: 12px;
    }
  }
}

.create_button {
  margin-top: 20px;
  display: flex;
  justify-content: end;
  width: 100%;
  min-width: 1000px;
  max-width: 1000px;
  z-index: 20;
  position: relative;
  .el_button {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 16px;
    border: none;
    padding: 10px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 1221px) {
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
